<template>
  <div class="container-fluid">
    <div class="common_title">
      文章发布
    </div>
    <div class="container-fluid common_con">
      <form class="form-horizontal article_form" id="form" ref="form">
        <div class="form-group">
          <label for="inputTitle" class="col-sm-2 control-label"
            >文章标题：</label
          >
          <div class="col-sm-10">
            <input
              type="text"
              name="title"
              class="form-control title"
              id="inputTitle"
              v-model="article.title"
            />
          </div>
        </div>
        <div class="form-group">
          <label for="inputCover" class="col-sm-2 control-label"
            >文章封面：</label
          >
          <div class="col-sm-10">
            <img :src="article.cover" class="article_cover" />
            <input
              name="cover"
              type="file"
              id="inputCover"
              ref="file"
              @change="doChange"
            />
          </div>
        </div>
        <div class="form-group">
          <label for="inputCategory" class="col-sm-2 control-label"
            >文章类别：</label
          >
          <div class="col-sm-4">
            <select
              class="form-control category"
              name="categoryId"
              v-model="article.categoryId"
            >
              <option
                v-for="(item, index) in categoryList"
                :key="index"
                :value="item.id"
                >{{ item.name }}</option
              >
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label">发布时间：</label>

          <div class="col-sm-4">
            <el-date-picker
              v-model="article.date"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label"
            >文章内容：</label
          >
          <div class="col-sm-10">
            <div id="editor"></div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button
              type="submit"
              class="btn btn-success btn-release"
              @click.prevent="doRelease('已发布')"
            >
              发布
            </button>
            <button
              type="submit"
              class="btn btn-default btn-draft"
              @click.prevent="doRelease('草稿')"
            >
              存为草稿
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
//导入wangeditor
import E from 'wangeditor'
//导入接口
import {getArticleCategory,releaseArticle,editArticle} from './article.js'
export default {
  name: 'articleRelease',
  data () {
    return {
      editor:null,//编辑器插件
      categoryList:[],
      article: {
        title:'请输入文章标题',
        cover:'',
        categoryId:1,
        date: new Date(),
        content:'请输入文章内容'
      }
    }
  },
  methods: {
    /* 图片预览 */
    doChange(){
      //(1)获取用户选择的文件
      let file = this.$refs.file.files[0]
      //(2)生成blob路径
      this.article.cover = URL.createObjectURL(file)
    },
    /* 发布文章 */
    async doRelease(state){
      //(1)创建formdata
      let fd = new FormData(this.$refs.form)
      //(2)追加其他参数
      fd.append('date',this.article.date)
      fd.append('content',this.editor.txt.html())
      fd.append('state',state)
      //(3)发送请求
      if( this.$route.params ){//编辑
          fd.append('id',this.article.id)
          let res = await editArticle(fd)
      }else{//发布
        let res = await releaseArticle(fd)
      }

      //(4)弹窗提示
      this.$message(state+'成功')
      //(5)跳转文章列表页
      this.$router.push('/articleList')
    }
  },

  /* 生命周期钩子 */
  async created() {
      //(1)请求文章分类列表
      let res1 = await getArticleCategory()
      //绑定分类数据
      this.categoryList = res1.data.data
      
  },
  mounted () {//页面完成初始渲染
    //判断是不是编辑
    if( this.$route.params ){
      this.article = this.$route.params
    }
    //初始化wangEditor
    this.editor = new E('#editor')
    // 或者 const editor = new E( document.getElementById('div1') )
    this.editor.create()
    //设置内容
    this.editor.txt.html('<h2>我是标题</h2>')
  }
}
</script>

<style></style>
